<template>
  <div class="positionmain">
    <PullRefresh @refresh="updateItems">
      <div slot="pullRefreshSlot">
        <div class="positionmain_header">
          <div class="positionmain_header_userinfo">
            <ItemImgHead :item="items" :isBigHead="isBigHead"></ItemImgHead>
            <div class="positionmain_header_follows">
              {{ items.position
              }}{{ $t("lang.城市") + " · " + positionDistance + "km" }}
            </div>
          </div>
          <div class="positionmain_header_map" id="map"></div>
          <Tabs>
            <span slot="tabsLeft">{{ $t("lang.热门") }}</span>
            <span slot="tabsRight">{{ $t("lang.近期") }}</span>
            <div slot="tabsLeftContent">
              <van-list
                v-model="leftLoading"
                :finished="leftFinished"
                :finished-text="$t('lang.已经到底了')"
                :error.sync="leftError"
                :error-text="this.$t('lang.请求失败，点击重新加载')"
                @load="leftOnLoad"
                v-if="myFeeds.length > 0"
              >
                <ThreeColumnList :items="myFeeds" key="tabsLeftContent">
                  <div slot="threeColumnItem" slot-scope="{ item }">
                    <router-link
                      :to="{
                        name: 'CONTENT',
                        params: {
                          contentid: item.contentId,
                          usid: item.userId,
                        },
                      }"
                    >
                      <ColumnItem :item="item.content[0]"></ColumnItem
                    ></router-link>
                  </div>
                </ThreeColumnList>
              </van-list>
              <div v-else class="nodata">
                <NoContent :type="noContentType"></NoContent>
              </div>
            </div>
            <div slot="tabsRightContent">
              <van-list
                v-model="rightLoading"
                :finished="rightFinished"
                :finished-text="$t('lang.已经到底了')"
                :error.sync="rightError"
                :error-text="this.$t('lang.请求失败，点击重新加载')"
                @load="rightOnLoad"
                v-if="atMyFeeds.length > 0"
              >
                <ThreeColumnList :items="atMyFeeds" key="tabsRightContent">
                  <div slot="threeColumnItem" slot-scope="{ item }">
                    <router-link
                      :to="{
                        name: 'CONTENT',
                        params: {
                          contentid: item.contentId,
                          usid: item.userId,
                        },
                      }"
                    >
                      <ColumnItem :item="item.content[0]"></ColumnItem
                    ></router-link>
                  </div>
                </ThreeColumnList>
              </van-list>
              <div v-else class="nodata">
                <NoContent :type="noContentType"></NoContent>
              </div>
            </div>
          </Tabs>
        </div>
      </div>
    </PullRefresh>
    <!-- <van-pull-refresh
      v-model="isLoading"
      @refresh="onRefresh"
      :pulling-text="this.$t('lang.下拉即可刷新')"
      :loosing-text="this.$t('lang.释放即可刷新')"
      :loading-text="this.$t('lang.加载中')"
    >
      <div class="positionmain_header">
        <div class="positionmain_header_userinfo">
          <ItemImgHead :item="items" :isBigHead="isBigHead"></ItemImgHead>
          <div class="positionmain_header_follows">
            {{ items.position
            }}{{ $t("lang.城市") + " · " + positionDistance + "km" }}
          </div>
        </div>
        <div class="positionmain_header_map" id="map"></div>
        <Tabs>
          <span slot="tabsLeft">{{ $t("lang.热门") }}</span>
          <span slot="tabsRight">{{ $t("lang.近期") }}</span>
          <div slot="tabsLeftContent">
            <van-list
              v-model="leftLoading"
              :finished="leftFinished"
              :finished-text="$t('lang.已经到底了')"
              :error.sync="leftError"
              :error-text="this.$t('lang.请求失败，点击重新加载')"
              @load="leftOnLoad"
              v-if="myFeeds.length > 0"
            >
              <ThreeColumnList :items="myFeeds" key="tabsLeftContent">
                <div slot="threeColumnItem" slot-scope="{ item }">
                  <router-link
                    :to="{
                      name: 'CONTENT',
                      params: {
                        contentid: item.contentId,
                        usid: item.userId,
                      },
                    }"
                  >
                    <ColumnItem :item="item.content[0]"></ColumnItem
                  ></router-link>
                </div>
              </ThreeColumnList>
            </van-list>
            <div v-else class="nodata">
              <NoContent :type="noContentType"></NoContent>
            </div>
          </div>
          <div slot="tabsRightContent">
            <van-list
              v-model="rightLoading"
              :finished="rightFinished"
              :finished-text="$t('lang.已经到底了')"
              :error.sync="rightError"
              :error-text="this.$t('lang.请求失败，点击重新加载')"
              @load="rightOnLoad"
              v-if="atMyFeeds.length > 0"
            >
              <ThreeColumnList :items="atMyFeeds" key="tabsRightContent">
                <div slot="threeColumnItem" slot-scope="{ item }">
                  <router-link
                    :to="{
                      name: 'CONTENT',
                      params: {
                        contentid: item.contentId,
                        usid: item.userId,
                      },
                    }"
                  >
                    <ColumnItem :item="item.content[0]"></ColumnItem
                  ></router-link>
                </div>
              </ThreeColumnList>
            </van-list>
            <div v-else class="nodata">
              <NoContent :type="noContentType"></NoContent>
            </div>
          </div>
        </Tabs>
      </div>
    </van-pull-refresh> -->
  </div>
</template>
<script>
export default {
  name: "PositionMain",
  components: {
    PullRefresh: () =>
      import(
        /* webpackChunkName:"pullRefresh" */ "../../components/common/pullRefresh.vue"
      ),
    ItemImgHead: () =>
      import(
        /* webpackChunkName: "itemPanelHeader" */ "../../components/common/itemImgHead"
      ),
    Tabs: () =>
      import(/* webpackChunkName: "tabs" */ "../../components/common/tabs"),
    ThreeColumnList: () =>
      import(
        /* webpackChunkName: "threeColumnList" */ "../../components/common/threeColumnList"
      ),
    ColumnItem: () =>
      import(
        /* webpackChunkName:"columnItem" */ "../../components/common/columnItem"
      ),
    NoContent: () =>
      import(
        /* webpackChunkName:"noContent" */ "../../components/common/noContent.vue"
      ),
  },
  data() {
    return {
      items: {},
      isBigHead: true,
      isAddContent: true,
      isLoading: false,
      myFeeds: [],
      atMyFeeds: [],
      positionDistance: 0,
      leftLoading: false,
      leftFinished: true,
      leftError: false,
      rightLoading: false,
      rightFinished: true,
      rightError: false,
      map: {
        point: {},
      },
      noContentType: 10,
    };
  },
  created() {
    let that = this;
    that.updateItems(1).then(() => {
      that.updateMyFeeds(1).then(() => {
        that.updateAtMyFeeds(1).then(() => {});
      });
    });
  },
  mounted() {
    this.updateGeolocation();
  },
  methods: {
    updateItems(pageNum, callback) {
      let that = this;
      return new Promise((resolve, reject) => {
        that.items = {
          id: "0123456",
          userId: "0123456",
          userHead:
            "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1595233833221&di=8cf8621bb5bdae4844362dfe99c54191&imgtype=0&src=http%3A%2F%2Fb.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2Fbd315c6034a85edf8c1758e240540923dc547553.jpg",
          nickName: "undefined",
          position: "北京",
          isNewContent: true,
          description: "个人介绍信息，个人信息",
          noteTotal: 200,
          follower: 100,
          follows: 3000,
        };
        callback && callback();
        resolve();
      });
    },
    updateMyFeeds(pageNum, callback) {
      let that = this;
      return new Promise((resolve, reject) => {
        that.myFeeds = [
          {
            userId: "0123456",
            contentId: "0123456",
            content: [
              {
                type: "image",
                url:
                  "https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=18296136,276139235&fm=26&gp=0.jpg",
              },
            ],
          },
          {
            userId: "0123456",
            contentId: "0123456",
            content: [
              {
                type: "image",
                url:
                  "https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=18296136,276139235&fm=26&gp=0.jpg",
              },
            ],
          },
          {
            userId: "0123456",
            contentId: "0123456",
            content: [
              {
                type: "image",
                url:
                  "https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=18296136,276139235&fm=26&gp=0.jpg",
              },
            ],
          },
          {
            userId: "0123456",
            contentId: "0123456",
            content: [
              {
                type: "image",
                url:
                  "https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=18296136,276139235&fm=26&gp=0.jpg",
              },
            ],
          },
          {
            userId: "0123456",
            contentId: "0123456",
            content: [
              {
                type: "image",
                url:
                  "https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=18296136,276139235&fm=26&gp=0.jpg",
              },
            ],
          },
          {
            userId: "0123456",
            contentId: "0123456",
            content: [
              {
                type: "image",
                url:
                  "https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=18296136,276139235&fm=26&gp=0.jpg",
              },
            ],
          },
          {
            userId: "0123456",
            contentId: "0123456",
            content: [
              {
                type: "image",
                url:
                  "https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=18296136,276139235&fm=26&gp=0.jpg",
              },
            ],
          },
          {
            userId: "0123456",
            contentId: "0123456",
            content: [
              {
                type: "image",
                url:
                  "https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=18296136,276139235&fm=26&gp=0.jpg",
              },
            ],
          },
          {
            userId: "0123456",
            contentId: "0123456",
            content: [
              {
                type: "image",
                url:
                  "https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=18296136,276139235&fm=26&gp=0.jpg",
              },
            ],
          },
          {
            userId: "0123456",
            contentId: "0123456",
            content: [
              {
                type: "image",
                url:
                  "https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=18296136,276139235&fm=26&gp=0.jpg",
              },
            ],
          },
          {
            userId: "0123456",
            contentId: "0123456",
            content: [
              {
                type: "image",
                url:
                  "https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=18296136,276139235&fm=26&gp=0.jpg",
              },
            ],
          },
          {
            userId: "0123456",
            contentId: "0123456",
            content: [
              {
                type: "image",
                url:
                  "https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=18296136,276139235&fm=26&gp=0.jpg",
              },
            ],
          },
        ];
        callback && callback();
        resolve();
      });
    },
    updateAtMyFeeds(pageNum, callback) {
      let that = this;
      return new Promise((resolve, reject) => {
        that.atMyFeeds = [
          {
            userId: "0123456",
            contentId: "0123456",
            content: [
              {
                type: "image",
                url:
                  "https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=18296136,276139235&fm=26&gp=0.jpg",
              },
            ],
          },
          {
            userId: "0123456",
            contentId: "0123456",
            content: [
              {
                type: "image",
                url:
                  "https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=18296136,276139235&fm=26&gp=0.jpg",
              },
            ],
          },
          {
            userId: "0123456",
            contentId: "0123456",
            content: [
              {
                type: "image",
                url:
                  "https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=18296136,276139235&fm=26&gp=0.jpg",
              },
            ],
          },
          {
            userId: "0123456",
            contentId: "0123456",
            content: [
              {
                type: "image",
                url:
                  "https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=18296136,276139235&fm=26&gp=0.jpg",
              },
            ],
          },
          {
            userId: "0123456",
            contentId: "0123456",
            content: [
              {
                type: "image",
                url:
                  "https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=18296136,276139235&fm=26&gp=0.jpg",
              },
            ],
          },
          {
            userId: "0123456",
            contentId: "0123456",
            content: [
              {
                type: "image",
                url:
                  "https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=18296136,276139235&fm=26&gp=0.jpg",
              },
            ],
          },
          {
            userId: "0123456",
            contentId: "0123456",
            content: [
              {
                type: "image",
                url:
                  "https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=18296136,276139235&fm=26&gp=0.jpg",
              },
            ],
          },
          {
            userId: "0123456",
            contentId: "0123456",
            content: [
              {
                type: "image",
                url:
                  "https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=18296136,276139235&fm=26&gp=0.jpg",
              },
            ],
          },
          {
            userId: "0123456",
            contentId: "0123456",
            content: [
              {
                type: "image",
                url:
                  "https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=18296136,276139235&fm=26&gp=0.jpg",
              },
            ],
          },
          {
            userId: "0123456",
            contentId: "0123456",
            content: [
              {
                type: "image",
                url:
                  "https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=18296136,276139235&fm=26&gp=0.jpg",
              },
            ],
          },
          {
            userId: "0123456",
            contentId: "0123456",
            content: [
              {
                type: "image",
                url:
                  "https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=18296136,276139235&fm=26&gp=0.jpg",
              },
            ],
          },
          {
            userId: "0123456",
            contentId: "0123456",
            content: [
              {
                type: "image",
                url:
                  "https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=18296136,276139235&fm=26&gp=0.jpg",
              },
            ],
          },
        ];
        callback && callback();
        resolve();
      });
    },
    updateGeolocation() {
      let that = this;
      var map = new BMap.Map("map");
      var geolocation = new BMap.Geolocation();
      geolocation.getCurrentPosition(
        function(r) {
          if (this.getStatus() == BMAP_STATUS_SUCCESS) {
            var mk = new BMap.Marker(r.point);
            map.addOverlay(mk);
            map.panTo(r.point);
            var point = new BMap.Point(r.point.lng, r.point.lat);
            map.centerAndZoom(point, 12);
            //alert("您的位置：" + r.point.lng + "," + r.point.lat);
          } else {
            //alert("failed" + this.getStatus());
          }
        },
        { enableHighAccuracy: true }
      );
    },
    myNoteClickhandle() {
      window.scrollTo(1, 1);
    },
    leftOnLoad() {},
    rightOnLoad() {},
  },
};
</script>
<style lang="less">
@base: 23.44rem;
.positionmain {
  .positionmain_header {
    .positionmain_header_userinfo {
      display: flex;
      .itemimghead {
        margin: 20 / @base;
      }
      .positionmain_header_follows {
        padding: 30 / @base 0;
        width: 80%;
        line-height: 35 / @base;
      }
    }
    .positionmain_header_map {
      height: 160 / @base;
      background-color: #ccc;
    }
    .tabs {
      .tabs_header {
        a {
          font-size: 14 / @base;
          padding: 10 / @base 0;
        }
      }
    }
  }
}
</style>
